<template>
  <div class="navbar-s">
    <el-dropdown
      class="avatar-container right-menu-item hover-effect"
      trigger="click"
    >
      <div class="avatar-wrapper">
        <h3>{{ deptName }}</h3>
      </div>
      <el-dropdown-menu slot="dropdown">
        <!-- <router-link to="/index"> -->
        <el-dropdown-item>
          <a :href="managerUrl" target="_black">管理后台</a>
        </el-dropdown-item>
        <!-- </router-link> -->
        <el-dropdown-item divided>
          <span @click="logout">退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Navbar",
  data() {
    return {
      deptName: this.$store.state.user.dept.deptName,
      managerUrl: process.env.VUE_APP_BASE_HTTP,
    };
  },
  created() {},
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          location.reload();
          sessionStorage.removeItem("communityName");
          sessionStorage.removeItem("communityId");
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar-s {
  .avatar-container {
    // margin-right: 30px;

    .avatar-wrapper {
      margin-top: 5px;
      position: relative;

      h3 {
        text-align: right;
        font-family: Arial, Helvetica, sans-serif;
        color: #02b6d4;
        height: 28px;
        line-height: 28px;
        font-size: 16px;
        font-weight: 700;
        padding: 0 15px 0 28px;
        cursor: pointer;
        position: relative;
      }

      h3:before {
        display: block;
        content: "";
        width: 20px;
        height: 20px;
        background: url("~@/assets/ops/images/s_ico1.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 3px;
      }

      h3:after {
        display: block;
        content: "";
        width: 7px;
        height: 4px;
        background: url("~@/assets/ops/images/s_ico2.png") no-repeat;
        position: absolute;
        right: 0;
        top: 10px;
      }

      .el-icon-caret-bottom {
        cursor: pointer;
        position: absolute;
        right: -20px;
        top: 15px;
        font-size: 12px;
      }
    }
  }
}
</style>
